<div class="right-content fl">
    <div class="common-tip">
        <a href="javascript:void(0)" class="home">Home </a>/
        <a href="javascript:void(0)" class="tip"> 模型模式 </a>/
        <a href="javascript:void(0)" class="tip"> 图形设置 </a>
    </div>
    <ul class="clearfix process">
        <li class="process-tab ml10 pr">
            <div>
                <span class="active">基本信息</span>
                <i class="pa"></i>
            </div>
            <i class="active pa"></i>
        </li>
        <li class="process-tab pr">
            <i class="process-i active"></i>
            <span class="active">算法设置</span>
            <i class="pa active"></i>
        </li>
        <li class="process-tab pr">
            <i class="process-i active"></i>
            <span  class="active">上传数据</span>
            <i class="pa active"></i>
        </li>
        <li class="process-tab pr">
            <i class="process-i active"></i>
            <span class="active">数据探索</span>
            <i class="pa active"></i>
        </li>
        <li class="process-tab pr">
            <i class="process-i active"></i>
            <span class="active">输入项设置</span>
            <i class="pa active"></i>
        </li>
        <li class="process-tab pr">
            <i class="process-i active"></i>
            <span class="active">展示效果图设置</span>
            <i class="i-text pa"></i>
            <i class="pa active"></i>
        </li>
        <li class="process-tab active pr">
            <i class="process-i"></i>
            <span>结果</span>
        </li>
    </ul>
    <div class="clearfix">
        <div class="data-list fl bgff">
            <div class="relative"><span>|</span><span class="ml15">数据清单</span></div>
            <div class="table-div">
                <table class="tabel-exploy" th:if="resultList!=0">
                    <tr v-for="(item, index) in resultList"><!--class="table-title"-->
                    <td  v-for="(datatem,key) in item">{{datatem}}</td>
                    </tr>
                    <!--<tbody>
                    <tr>
                        <td><span class="table-span-name">年龄</span></td>
                        <td><span>样本图形</span></td>
                        <td><span>18</span></td>
                        <td><span>77</span></td>
                        <td><span>42</span></td>
                        <td><span>12</span></td>
                        <td><span>0.2</span></td>
                    </tr>
                    </tbody>-->
                </table>
            </div>
        </div>
        <div class="img-list fr bgff">
            <div class="relative title-show"><span>|</span><span class="ml15">图形展示设置</span></div>
            <div class="img-content" v-if="settingList.length>0">
                <div class="img-block" v-for="(item, index) in settingList">
                    <div class="img-title">
                        <span>{{item.name}}</span>
                        <span  class="modify fr mr5" @click="detail($event,item.id)">修改</span>
                        <span class="del fr" @click="del($event,item.id)">删除</span>
                    </div>
                    <div class="img-div">
                        <img src="./img/ic-usemodel.png" alt="" class="fl">
                        <div class="fl ml20">
                            <p>
                                <span>变量1:</span><span>{{item.xExpress}}</span>
                            </p>
                            <p>
                                <span>变量2:</span><span>{{item.yExpress}}</span>
                            </p>
                        </div>
                    </div>
                </div>
               <!-- <div class="img-block">
                    <div class="img-title">
                        <span>图形一图形一</span>
                        <a href="javascript:void(0)" class="modify fr mr5">修改</a>
                        <a href="javascript:void(0)" class="del fr">删除</a>
                    </div>
                    <div class="img-div">
                        <img src="./img/ic-usemodel.png" alt="" class="fl">
                        <div class="fl ml20">
                            <p>
                                <span>变量1:</span><span>aaaaa</span>
                            </p>
                            <p>
                                <span>变量2:</span><span>bbbbbb</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="img-block">
                    <div class="img-title">
                        <span>图形一图形一</span>
                        <a href="javascript:void(0)" class="modify fr mr5">修改</a>
                        <a href="javascript:void(0)" class="del fr">删除</a>
                    </div>
                    <div class="img-div">
                        <img src="./img/ic-usemodel.png" alt="" class="fl">
                        <div class="fl ml20">
                            <p>
                                <span>变量1:</span><span>aaaaa</span>
                            </p>
                            <p>
                                <span>变量2:</span><span>bbbbbb</span>
                            </p>
                        </div>
                    </div>
                </div>-->
            </div>
            <div class="btns" @click="addImgSetting">
                    <span class="fz18 mr10">+</span>
                    新建图形
            </div>
        </div>
    </div>
    <div id="add" class="bgff add-img" style="display: none;">
        <div class="basic-div">|
            <span class="ml15">新增图形</span>
            <span class="fr x-span" @click="closeLay">×</span>
        </div>
        <hr />
        <div class="add-img-content">
            <div class="add-center">
                <div><span>图表名称</span><input type="text" v-model="add_imgName"></div>
                <div>
                    <span>变量x</span>
                    <select v-if="fieldList.length>0" v-model="add_xColumn" id="add_xSelected">
                      <option :value="item.Field" v-for="(item, index) in fieldList">{{item.value}}</option>
                    </select>
                </div>
              <div>
                <div class="fl">
                  <span>变量y</span>
                  <select style="width: 110px;margin-left: 6px;" v-if="fieldList.length>0" v-model="add_yColumn" id="add_ySelected">
                    <option :value="item.Field" v-for="(item, index) in fieldList">{{item.value}}</option>
                  </select>
                </div>
                <div class="fr">
                  <span>目标</span>
                  <select style="width: 110px;" v-model="add_yValue">
                    <option value="0">求和</option>
                    <option value="1">计数</option>
                    <option value="2">原始值</option>
                  </select>
                </div>
              </div>
              <div>
                <span>展示形式</span>
                <select v-model="add_imgId">
                  <option value="1">柱状图</option>
                  <option value="2">折线图</option>
                  <option value="3">饼图</option>
                  <option value="4">散点图</option>
                </select>
              </div>
            </div>
        </div>
        <hr />
        <div class="margin-auto en-div mt15">
            <a class="next-btn" @click="add">添加</a>
            <a class="cancel-btn ml20" @click="closeLay">取消</a>
        </div>

    </div>
    <div id="edit" class="bgff add-img" style="display: none;">
      <div class="basic-div">|
        <span class="ml15">编辑图形</span>
        <span class="fr x-span" @click="closeEditLay">×</span>
      </div>
      <hr />
      <div class="add-img-content">
        <div class="add-center">
          <div><span>图表名称</span><input type="text" v-model="edit_imgName"></div>
          <div>
            <span>变量x</span>
            <select v-if="fieldList.length>0" v-model="edit_xColumn" id="edit_xSelected">
              <option :value="item.Field" v-for="(item, index) in fieldList">{{item.value}}</option>
            </select>
          </div>
          <div>
            <div class="fl">
              <span>变量y</span>
              <select style="width: 110px;margin-left: 6px;" v-if="fieldList.length>0" v-model="edit_yColumn" id="edit_ySelected">
                <option :value="item.Field" v-for="(item, index) in fieldList">{{item.value}}</option>
              </select>
            </div>
            <div class="fr">
              <span>目标</span>
              <select style="width: 110px;" v-model="edit_yValue">
                <option value="0">求和</option>
                <option value="1">计数</option>
                <option value="2">原始值</option>
              </select>
            </div>
          </div>
          <div>
            <span>展示形式</span>
            <select v-model="edit_imgId">
              <option value="1">柱状图</option>
              <option value="2">折线图</option>
              <option value="3">饼图</option>
              <option value="4">散点图</option>
            </select>
          </div>
        </div>
      </div>
      <hr />
      <div class="margin-auto en-div mt15">
        <a class="next-btn" @click="edit">保存</a>
        <a class="cancel-btn ml20"  @click="closeEditLay">取消</a>
      </div>
    </div>
    <div class="text-center mt30">
        <a class="cancel-btn" @click="goback">上一步</a>
        <a class="next-btn ml20" @click="next">下一步</a>
    </div>
</div>
